<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>增加博客</title>

    <script src="<%=basePath%>../static/jquery/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="<%=basePath%>../static/layui/layui.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../static/layui/css/layui.css">
    <script src="<%=basePath%>../static/bootstrap/js/bootstrap.min.js"></script>
    <link href="<%=basePath%>favicon.ico" rel="shortcut icon">

    <link rel="stylesheet" href="<%=basePath%>../static/editor.md/css/editormd.css"/>
    <link rel="stylesheet" href="<%=basePath%>../static/editor.md/css/editormd.min.css"/>
    <script src="<%=basePath%>../static/editor.md/editormd.js"></script>
    <script src="<%=basePath%>../static/editor.md/editormd.amd.js"></script>

    <style type="text/css">

        .bigC{

            width: 1000px;
            border:1px solid gainsboro ;
            border-radius: 10px;
            padding-top: 20px;
            padding-right: 20px;

        }
        .labelC{
            width: 100px;
        }

        .top{
            padding-left: 70px;
            margin-top: 30px;
            font-family: "华文楷体";
            font-size: 20px;
        }

    </style>
</head>


<body>
<div class="top">

    <p>
        发布文章
    </p>
    <hr width="1000px">
</div>

<div style="padding-top: 30px;padding-left: 70px">
    <div class="bigC">
        <form class="layui-form" name="myForm" id="msg_form">
            <div class="layui-form-item">
                <label class="layui-form-label labelC">文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label labelC">文章摘要</label>
                <div class="layui-input-block">
                    <input type="text" name="summary" id="summary" required lay-verify="required" placeholder="请输入摘要" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label labelC">文章描述</label>
                <div class="layui-input-block">
                    <textarea type="text" name="description" id="description" style="height: 50px" required lay-verify="required" placeholder="文章主要描述，50字以内即可！"
                              class="layui-input"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label labelC">文章分类</label>
                <div class="layui-input-block">
                    <select id="typeId" lay-verify="required">
                            <option value=""></option>

                        <c:forEach var="type" items="${types}">
                            <option value="${type.type_id}" >${type.type_name}</option>
                        </c:forEach>

                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label labelC">文章封面</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upPic" style="margin-left: 10px">上传图片</button>
                    <div class="layui-upload-list" style="padding-left: 110px">
                        <img class="layui-upload-img" width="200px" height="150px" id="demo1" >
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>

            <%--隐藏区域图片路径--%>
            <input type="hidden" id="pic" name="pic" value="" />




           <%-- <div class="layui-form-item">
                <label class="layui-form-label labelC">是否置顶</label>
                <div class="layui-input-block">
                    <input type="radio"   name="top_flag" value="0" title="是">
                    <input type="radio"  name="top_flag" value="1" title="否" checked>
                </div>
            </div>--%>

            <div class="layui-form-item">
                <label class="layui-form-label labelC">文章内容</label>
                <div class="layui-input-block" >
                    <div id="editor">
                    <textarea id="content"  name="content" style="display: none"></textarea>
                    </div>
                </div>
                </div>


        </form>
        <div style="padding-left: 120px">
            <button id="btn" class="layui-btn layui-btn-normal"> 发布 </button>
            <button  type="reset" class="layui-btn layui-btn-warm"> 重置 </button>
        </div>
    </div>
     </div>

<script type="text/javascript">


    $(function() {
        var editor = editormd("editor", {
            width: "100%",
            height: 500,
            emoji:true,
            syncScrolling: "single",
            saveHTMLToTextarea : true,
            path:"../static/editor.md/lib/",

            /**上传图片相关配置如下*/
            imageUpload : true,  //开启图片上传
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL :"${pageContext.request.contextPath}/blog/uploadFile", //上传的路径，就是mvc的controller路径
            onload: function () {
                console.log('onload', this);
            }
        });

    });


    //layui上传封面图片
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upPic', //绑定元素
            url: '/blog/uploadPic/', //上传接口
            before: function(obj){
                //预读本地文件示例
                obj.preview(function(index, files, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

            },
            done: function(res){
                //如果上传失败
                if(res){
                    //上传成功
                    layer.msg("上传成功");
                    $("#pic").attr("value",res.url);
                    $("#imgDiv").css("display","")// 显示图片框
                } else {
                    return layer.msg('上传失败');
                }
            },
            error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

    });



        //提交表单
        $('#btn').click(function () {

        $.post({

            url:"${pageContext.request.contextPath}/article/addBlog",
            dataType:"json",
            data:{
                "article_title": $('#title').val(),
                "article_summary":$('#summary').val(),

                "content_html": $('#content').val(),
                //日期
                "article_data":new Date().toDateString(),
                //类型id
                //使用$('#typeId').find('option:selected').val()来获取下拉框的值
                "article_typeId":$('#typeId').val(),
                //是否置顶
                "top_flag":$("input[name='top_flag']:checked").val(),
                //描述
                "article_description":$("#description").val(),
                //封面
                "article_picture":$("#pic").val()
            },
            success: function (data) {

                alert(data['msg']);
                $('#msg_form')[0].reset();
            }
        })
    })

</script>

</body>
</html>
